<div class="mt30">
  <button nz-button nzType="primary" nzSize="large" (click)="openAddHero()">
    <span>添加英雄</span>
  </button>
</div>
<nz-table #nzTable [nzAjaxData]="heroes" [nzIsPagination]="false" class="star-table">
  <thead nz-thead>
  <tr>
    <th nz-th><span>英雄名称</span></th>
    <th nz-th><span>英雄类别</span></th>
    <th nz-th><span>操作</span></th>
  </tr>
  </thead>
  <tbody nz-tbody>
  <tr nz-tbody-tr *ngFor="let hero of nzTable.data">
    <td nz-td>
      {{hero.name}}
    </td>
    <td nz-td>{{hero.type}}</td>
    <td nz-td width="200">
      <a (click)="goToDetail(hero.id)">详情</a>
      <span nz-table-divider></span>
      <a (click)="openAddHero(hero)">编辑</a>
      <span nz-table-divider></span>
      <a (click)="deleteHero(hero)">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>

<nz-modal [nzVisible]="isAddHeroVisible" nzTitle="添加英雄" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="addHeroCancel()">
  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label for="name" nz-form-item-required>英雄名称</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('name')">
          <nz-input nzSize="large" formControlName="name" nzPlaceHolder="请输入英雄名字"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('required')">不能为空</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label for="type" nz-form-item-required>英雄类别</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('type')">
          <nz-select  nzSize="large" formControlName="type" [nzPlaceHolder]="'Select a person'">
            <nz-option
              *ngFor="let option of options"
              [nzLabel]="option.label"
              [nzValue]="option.value">
            </nz-option>
          </nz-select>
          <div nz-form-explain *ngIf="getFormControl('type').dirty && getFormControl('type').hasError('required')">不能为空</div>
        </div>
      </div>
    </form>
    <p>Form value: {{ validateForm.value | json }}</p>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="addHeroCancel()">取消</button>
    <button nz-button nzType="primary" (click)="addHeroConfirm()">确定</button>
  </ng-template>
</nz-modal>
